<template>
  <div class="container-fluid">
    <div class="row center-block">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-3">
            <div class="box-body">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title"></h3> 
                  <div class="box-tools pull-left" v-if="editable">
                     <el-button type="primary" @click="()=>addVisible = true">
                       <i class="fa fa-plus-square">新 增</i>
                     </el-button>
                     <el-button type="success" @click="()=>editVisible = true">
                       <i class="fa fa-edit">调 整</i>
                     </el-button>
                     <el-button type="warning" @click="deleteSelNode">
                       <i class="fa fa-trash">删 除</i>
                     </el-button>
                    <!-- <button type="button" class="btn btn-success" @click="$root.$emit('show::modal','modalOU')" data-toggle="tooltip" data-widget="chat-pane-toggle" data-original-title="">
                      <i class="fa fa-plus-square">新 增</i>
                    </button>
                    <button type="button" class="btn btn-success" @click="$root.$emit('show::modal','modalTreeSeq')" data-toggle="tooltip" title="" data-widget="chat-pane-toggle" data-original-title="">
                      <i class="fa fa-edit">调 整</i>
                    </button>
                    <button type="button" class="btn btn-warning" @click="deleteSelNode" data-toggle="tooltip" title="" data-widget="chat-pane-toggle" data-original-title="删除组织节点">
                      <i class="fa fa-trash">删 除</i>
                    </button> -->
                  </div>
                </div>
                <div class="box-body">
                  <section id="departTree">
                    <departTree ref='departTree' @nodechange="nodechange"></departTree>
                  </section>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-9">
            <div class="box-body">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">单位详情</h3>
                  <div class="box-tools pull-right">
                    <button type="button" class="btn btn btn-success" @click="editSelNode" v-if="editable">
                      <i class="fa fa-edit">{{editText}}</i>
                    </button>
                    <button type="button" class="btn btn btn-primary" @click="updateSelNode" v-if="isEditNode">
                      <i class="fa fa-save">保存</i>
                    </button>
                  </div>
                </div>
                <div class="box-body">
                  <section class="content" id="departDetail">
                    <DepartDetail ref="departDetail" :editable="isEditNode"></DepartDetail>
                  </section>
                </div>
              </div>
            </div>
          </div>
        </div>

        <el-dialog title='新增组织' v-if="addVisible" :before-close="()=>addVisible = false" :visible.sync="addVisible" :modal="true" size="small">
          <DepartBaseInfo v-if="addVisible" ref='newDepartBaseInfo' v-bind:baseInfo="this.selectedDepart.baseInfo" v-bind:isReadOnly="!editable"></DepartBaseInfo>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addVisible = false">关 闭</el-button>
            <el-button type="primary" @click="submitNewDepart">确 定</el-button>
          </span>
        </el-dialog>

        <el-dialog title='编辑组织节点' v-if="editVisible" :before-close="()=>editVisible = false" :visible.sync="editVisible" :modal="true" size="small" >
          <dragTree ref='editDepartTree' v-if="editVisible" :recurLevel='3' :model='this.editTree' :childrenKey='"subDepartments"' style="overflow-y: scroll;max-height: 500px;"></dragTree>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editVisible = false">关 闭</el-button>
            <el-button type="primary" @click="submitTree">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import Common from "./common"
import departTree from '../mycomponents/departs/departTree'
import dragTree from '../mycomponents/departs/dragTree'
import DepartBaseInfo from '../mycomponents/departs/DepartBaseInfo'
import DepartDetail from '../mycomponents/departs/DepartDetail'
import Utils from '../../common/utils'
let util = new Utils()
export default {
  name: 'Organaization',
  components: {
    departTree,
    DepartDetail,
    DepartBaseInfo,
    dragTree
  },
  data: function() {
    return {
      editText:'编辑',
      addVisible:false,
      editVisible:false,
      isEditNode: false,
      editable: true,
      currentDepart: null,
      selectedDepart: {
        baseInfo: {
          address: '',
          zipcode: '',
          areacode: '',
          fax: '',
          tel: ''
        },
        empoyees: [],
        helper: null
      },
      editTree: {
        name: 'Root',
        id: 0,
        subDepartments: []
      }
    }
  },
  beforeCreate: function() {

  },
  created: function() {
    this.helper = new Common()
  },
  mounted: function() {
    this.$nextTick(() => {
      this.helper.autoheight("departDetail")
      this.helper.autoheight("departTree")
      this.loadTreeData()
    })
  },
  methods: {
    assignData(data) {
      this.editTree = data
      //this.$refs.editDepartTree.$forceUpdate()
    },
    nodechange: function(node) {
      this.currentDepart = node
      this.getdepartData(node)
    },
    submitNewDepart(e) {
      let newDepart = this.$refs.newDepartBaseInfo.getData()
      newDepart.subDepartments = []
      this.addDepart(newDepart)
    },
    // 添加新节点
    addDepart(depart) {
      let preslibe = null
      // 添加在末尾
      if (this.currentDepart.subDepartments.length > 0) {
        preslibe = this.currentDepart.subDepartments[this.currentDepart.subDepartments.length - 1].id
      }
      // 添加json
      let newJson = this.createDepart(depart)
      newJson.parentId = this.currentDepart.id
      newJson.preSiblingId = preslibe
      // 发送新建请求
      this.$http.post('/hr/department/add', newJson).then(response => {
        console.log("add response" + response);
        if (response.body.result == 1) {
          depart.id = response.body.body
          this.$refs.departTree.rescurAddChildNode(this.currentDepart.id, depart)
          this.$refs.newDepartBaseInfo.clearData()
          this.loadTreeData()
          this.addVisible=false
        }
      }, response => {
        console.log('failed:' + response.data)
      })
    },
    // 创建组织节点
    createDepart(depart) {
      let newJson = {
        //parentId: this.currentDepart.id,
        postalcode: depart.zipcode == ''?null:depart.zipcode,
        telephone: depart.tel == ''?null:depart.tel,
        address: depart.address,
        fax: depart.fax,
        areaCode: depart.areacode== ''?null:depart.areacode,
        name: depart.name,
        type: 1
      }
      return newJson
    },
    // 编辑组织节点
    editSelNode() {
      this.isEditNode = !this.isEditNode
      if(this.isEditNode){
        this.editText = '取消'
      }
      else{
        this.editText = '编辑'
      }
    },
    // 更新组织节点信息
    updateSelNode() {
      let depart = this.$refs.departDetail.getDepartBaesData()
      let updateJson = this.createDepart(depart)
      updateJson.id = this.currentDepart.id
      this.$http.post('/hr/department/update', updateJson)
        .then(response => {
          console.log("update response" + response);
          if (response.body.result == 1) {
            this.currentDepart.name = depart.name
            this.editSelNode()
          }
        }, response => {
          console.log('failed:' + response.data)
        })
    },
    // 清除编辑数据
    clearEditData(e) {
      this.$refs.newDepartBaseInfo.clearData()
    },
    // 删除节点
    deleteSelNode() {
      var that = this
      util.deleteConf(this,()=>{
        console.log('delete ' + JSON.stringify(that.currentDepart))
        var para = '?id=' + that.currentDepart.id
        if(that.currentDepart.preSiblingId){
          para = para+'&preSiblingId='+that.currentDepart.preSiblingId
        }
        that.$http.delete('/hr/department/delete'+para)
          .then(response => {
            console.log("delete response" + response);
            if (response.body.result == 1) {
              that.$refs.departTree.rescurDelNode(that.currentDepart.id)
            }
          }, response => {
            console.log('failed:' + response.data)
          })
      })
    },
    // 获取节点详情
    getdepartData: function(node) {
      this.$http.get('/hr/department/get?id=' + node.id)
        .then(response => {
          console.log("get response" + response);
          if (response.body.result == 1) {
            var depart = response.body.body
            let eDepart = {
              baseInfo: {
                zipcode: depart.postalcode,
                tel: depart.telephone,
                address: depart.address,
                fax: depart.fax,// TODO 修改为传真
                name: depart.name,
                areacode: depart.areaCode //TODO 添加区号
              },
              employees: depart.employees
            }
            this.$refs.departDetail.departChanged(eDepart)
          }
        }, response => {
          console.log('failed:' + response.data)
        })
    },
    loadTreeData(){
      Vue.http.post('/hr/department/list').then(response => {
        this.editTree = response.data.body[0]
        //this.$store.commit("SET_DEPARTS", this.editTree)
        console.log("tree:" + JSON.stringify(this.editTree))
        //this.$refs.editDepartTree.$forceUpdate()
        //this.$refs.editDepartTree.setData(this.editTree)

      }, response => {
        console.log(response)
      })
    },
    submitTree() {
      let treeData = this.editTree
      this.assignTree(treeData)
      this.$http.post('/hr/department/changePosition', treeData)
        .then(response => {
          console.log("change position response" + response);
          if (response.body.result == 1) {
            this.$refs.departTree.loadTreeData()
            this.loadTreeData()
            this.editVisible=false
          }
        }, response => {
          console.log('failed:' + response.data)
        })
    },
    assignTree(treeData) {
      if (treeData && treeData.subDepartments && treeData.subDepartments.length >0){
        for(var index in treeData.subDepartments){
          if(index ==0){
            treeData.subDepartments[0].parentId = treeData.id
            treeData.subDepartments[0].preSiblingId = null
          }
          else{
            treeData.subDepartments[index].parentId = treeData.id
            treeData.subDepartments[index].preSiblingId = treeData.subDepartments[index-1].id
          }

          let node = treeData.subDepartments[index]
          this.assignTree(node)
        }
      }
  }
  }
}
</script>

<style>
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
}
</style>
